<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>找回密码</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/hotel.css"/>
    <script type="text/javascript" src="layer/layer.js"></script>
    <style type="text/css">
        #userQuestion{
            display: inline-block;
            width: 240px;
            height: 28px;
        }
    </style>
</head>
<body class="retrieve-body">
<input type="hidden" id="userName" th:value="${session.userAccount}"/>
<input type="hidden" id="UserStatusid" th:value="${session.UserStatusid}"/>
<script type="text/javascript">
    var ustatusid = $('#UserStatusid').val();
    if(ustatusid == 1){
        window.location.href = "toDecode.do";
    }
</script>
<form action="" method="post">
    <div class="retrieve">
        <div class="retrieve-text">
            <ul>
                <li><label for="userAccount">账号:</label></li>
                <li>查询:</li>
                <li>提问:</li>
                <li><label for="userAnswer">答案:</label></li>
                <!--<li>密码:</li>-->
            </ul>
        </div>
        <div class="retrieve-input">
            <ul>
                <li>
                    <input type="text" id="userAccount"/>
                </li>
                <li>
                    <button class="btn-retrieve"  id="btnNext" style="margin: 20px 0px 25px" type="button">下一步</button>
                </li>
                <li>
                    <!--<input type="text" th:value="${userQuestion}" readonly="readonly" id="userQuestion"/>-->
                    <span id="userQuestion" th:text="${session.userQuestion}"></span>
                </li>
                <li>
                    <input type="text" id="userAnswer"/>
                </li>
                <!--<li><span></span></li>-->
            </ul>
        </div>
    </div>
    <div class="btnretrieve">
        <button class="btn-retrieve" id="btn-retrieve" type="button">找回</button>
        <button class="retrieve-cancel" type="reset">取消</button>
    </div>
</form>
<div class="back-login">
    返回<a href="toLogin.do">登录</a>
</div>
</body>
<script type="text/javascript">
    $('#userAccount').blur(checkUser);
    $('#userAnswer').blur(checkAnswer);
    var userAccount;
    var userAnswer;
    function checkUser() {
        userAccount = $('#userAccount').val();
        var reg_userAccount = /^\w{6,10}$/;
        var flag = reg_userAccount.test(userAccount);
        if (flag) {
            $("#userAccount").css("border", "");
        } else {
            layer.tips('账号需满足6到10位并且不能为中文', '#userAccount');
            $("#userAccount").css("border", "1px solid red");
        }
        return flag;
    }
    function checkAnswer() {
        userAnswer = $('#userAnswer').val();
        var flag = (userAnswer != '');
        if (flag) {
            $("#userAnswer").css("border", "");
        } else {
            layer.tips('答案不能为空', '#userAnswer');
            $("#userAnswer").css("border", "1px solid red");
        }
        return flag;
    }
    $('#btnNext').click(function (){
        if(checkUser()){
            $.post(
                "retrieve.do",
                {"userAccount":userAccount},
                function (data){
                    if (data.status == 0) {
                        window.location.reload();
                    } else if (data.status == 1) {
                        layer.msg(data.message);
                    }
                }
            );
        }
    })
    $('#btn-retrieve').click(function (){
        var userName = $('#userName').val();
        if(checkAnswer()&&userName != ''){
            $.post(
                "retrieveAnswer.do",
                {"userName":userName,"userAnswer":userAnswer},
                function (data){
                    if (data.status == 0) {
                        window.location.href = "toUpdatepassword.do";
                    } else if (data.status == 1) {
                        layer.msg(data.message);
                    }
                }
            );
        }else {
            layer.msg("信息不完整");
        }
    })
</script>
</html>
